<template>
  <div class="section-tree">
    <el-tree v-if="dataList && dataList.length" ref="treeRef" :data="dataList" 
      :props="{ label: 'sectionName' }" 
      draggable :allow-drop="allowDrop" @node-drop="handleDrop"
      node-key="id" :indent="12" :expand-on-click-node="true" :highlight-current="true" :default-expanded-keys="[0]"
      :default-checked-keys="[0]" @node-click="handleSelect" class="w-full">
      <template #default="{ node, data }">
        <div class="flex-col justify-between w-full tree-node-content">
          <div class="node-main flex-x items-center w-full">
            <i v-if="!data.fileUrl" :class="['fa mr-2', node.expanded ? 'fa-folder-open' : 'fa-folder']" />
            <i v-else :class="['fa mr-2', parseSectionTypeIcon(data)]" />
            <span class="node-text flex-1">{{ data.sectionName }}</span>
          </div>
          <div class="node-actions flex-x gap-2 mt-1 justify-end">            
            <el-button type="text" size="mini" @click.stop="handleRename(data)">
              重命名
            </el-button>
            <el-button type="text" size="mini" @click.stop="handleDelete(data)"
              class="color-danger">
              删除
            </el-button>
          </div>
        </div>
      </template>
    </el-tree>
    <el-empty v-else description="暂无章节数据"></el-empty>
  </div>

</template>

<script>
import api from '@/common/api';
import utils from '@/common/utils';

export default {
  name: 'SectionTree',
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    }
  },

  methods: {
    parseSectionTypeIcon(section) {
      if (section.fileType === 'ppt') {
        return 'fa-file-powerpoint-o'
      } else if (section.fileType === 'md') {
        return 'fa-file-word-o'
      } else if (section.fileType === 'video') {
        return 'fa-file-video-o'
      } else if (section.fileType === 'pdf') {  
        return 'fa-file-pdf-o'
      } else {
        return 'fa-file-o'
      }
    },

    expandById(id) {
      this.$refs.treeRef.store.nodesMap[id].expanded = true
    },

    allowDrop(draggingNode, dropNode, type) {
      const section = dropNode.data
      if (section.fileUrl != null) {
        return type !== 'inner'
      }
      return true
    },

    handleDrop(draggingNode, dropNode, type) {
      const draggingData = draggingNode.data
      const dropData = dropNode.data      
    
      const parentId = type === 'inner' ? dropData.id : dropData.parentId
      let idList = []
      if (!parentId) {
        idList = this.dataList.map(item => item.id)
      } else {
        const parentNode = utils.getTreeNodeById(this.dataList, parentId)        
        idList = parentNode.children.map(item => item.id)
      }

      this.$emit('sort', {parentId, idList})
      return true
    },

    handleRename(section) {
      this.$emit('rename', section)
    },

    handleDelete(section) {
      this.$emit('delete', section)
    },

    handleAddContent(section) {
      this.$emit('addContent', section)
    },

    handleSelect(section) {      
      this.$emit('select', section)
    }
  }
}
</script>

<style scoped>
.section-tree {
  width: 100%;
  overflow: hidden;

  :deep(.el-tree) {
    width: 100%;
  }

  :deep(.el-tree-node) {
    width: 100%;
  }

  :deep(.el-tree-node__content) {
    width: 100%;
    height: auto;
    padding: 8px 12px;
  }

  .tree-node-content {
    width: 100%;
    max-width: 100%;
  }

  .node-main {
    width: 100%;
    max-width: 100%;
    gap: 0;
    transition: all 0.3s ease;
    font-size: 14px;
  }

  .node-text {
    max-width: calc(100% - 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .node-actions {
    height: 0;
    opacity: 0;
    transition: all 0.3s ease;
    overflow: hidden;
  }

  :deep(.el-tree-node__content:hover) {
    .node-main {
      font-size: 12px;
    }

    .node-actions {
      height: 24px;
      opacity: 1;
    }
  }

  .hover-actions {
    min-width: 40px;
    flex-shrink: 0;
  }

  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :deep(.el-tree-node__content:hover .hover-actions) {
    display: block;
  }

  .hover-actions {
    display: none;
  }
}
</style>
